<template>
    <div>
        <div class="video-page" v-if="systemShow == 1">
            <Row type="flex" justify="center" align="middle" class="video-page-row">
                <Col class="video-top">
                    <video :src="video1" controls="controls" class="video" autoplay="autoplay"></video>
                </Col>
                <Col>
                    <Button type="primary" @click="inSystem(2)">{{ btnTitle }}</Button>
                </Col>
            </Row>
        </div>
        <div v-if="systemShow ==2">
            <Row type="flex" justify="center" align="middle" class="video-select">
                <Col>
                    <h2>视频中，向甲方介绍产品价格的时候，是从哪些方面进行的介绍？</h2>
                </Col>
                <Col class="video-top">
                    <RadioGroup v-model="vertical" vertical>
                        <Radio label="a">
                            <Icon type="social-apple"></Icon>
                            <span>A.构成，成本， 配置， 总价</span>
                        </Radio>
                        <Radio label="b">
                            <Icon type="social-android"></Icon>
                            <span>B.规格，型号， 类型， 分类</span>
                        </Radio>
                        <Radio label="c">
                            <Icon type="social-windows"></Icon>
                            <span>C.市场，区域， 来源， 品质</span>
                        </Radio>
                        <Radio label="d">
                            <Icon type="social-windows"></Icon>
                            <span>D.采购，生成， 加工， 储存</span>
                        </Radio>
                    </RadioGroup>
                </Col>
                <Col>
                    <Button type="primary" @click="inSystem(4)">{{ btnTitle }}</Button>
                </Col>
            </Row>
        </div>
        <div class="video-page" v-if="systemShow ==4">
            <Row type="flex" justify="center" align="middle" class="video-page-row">
                <Col class="video-top">
                    <video :src="video2" controls="controls" class="video" autoplay="autoplay"></video>
                </Col>
                <Col>
                    <Button type="primary" @click="inSystem(3)">进入系统</Button>
                </Col>
            </Row>
        </div>
        <div class="cost-page" v-if="systemShow==3">
            <div v-if="!showNext" class="content">
                <div class="content-form">
                    <Form ref="formValidate" :model="formValidate" :label-width="200">
                        <FormItem label="请选择网络平台" prop="name">
                            <Select v-model="select1" placeholder="选择网址">
                                <Option :value="index" v-for="(item,index) in catList" :key="index">
                                    {{item.name}}{{item.url}}
                                </Option>
                            </Select>
                        </FormItem>
                        <FormItem label="产品采购价格" prop="name">
                            <Input v-model="formValidate.name" placeholder="产品采购价格"></Input>
                        </FormItem>
                        <FormItem>
                            请根据成本分析模块，将下列7个参数中的两个作为定价影响因素：（可以输入小数点后两位的正负整数）
                        </FormItem>
                        <FormItem label="将货品种类作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[1]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.huopin" placeholder=""
                                               :disabled="!disableList[1]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.huopinRemark" placeholder="理由内容"
                                               :disabled="!disableList[1]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将仓储物流 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[2]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.cangchu" placeholder=""
                                               :disabled="!disableList[2]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.cangchuRemark" placeholder="理由内容"
                                               :disabled="!disableList[2]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将增值服务 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[3]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.zengzhi" placeholder=""
                                               :disabled="!disableList[3]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.zengzhiRemark" placeholder="理由内容"
                                               :disabled="!disableList[3]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将汇率 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[4]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.huilv" placeholder=""
                                               :disabled="!disableList[4]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.huilvRemark" placeholder="理由内容"
                                               :disabled="!disableList[4]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将平台费用 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[5]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.pingtai" placeholder=""
                                               :disabled="!disableList[5]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.pingtaiRemark" placeholder="理由内容"
                                               :disabled="!disableList[5]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将数据收集 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[6]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.shuju" placeholder=""
                                               :disabled="!disableList[6]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.shujuRemark" placeholder="理由内容"
                                               :disabled="!disableList[6]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem label="将竞争对手 作为定价参数">
                            <Row>
                                <Col span="2">
                                    <Checkbox v-model="disableList[0]"></Checkbox>
                                </Col>
                                <Col span="10">
                                    <FormItem>
                                        <Input v-model="formValidate.jingzheng" placeholder=""
                                               :disabled="!disableList[0]"></Input>
                                    </FormItem>
                                </Col>
                                <Col span="2" style="text-align: center">理由：</Col>
                                <Col span="10">
                                    <FormItem prop="time">
                                        <Input v-model="formValidate.jingzhengRemark" placeholder="理由内容"
                                               :disabled="!disableList[0]"></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </FormItem>

                        <FormItem>
                            <Button type="primary" @click="getSumPrice" :loading="loading">保存</Button>
                            <Button type="primary" :disabled="button" @click="showNextAction" style="margin-left: 8px">
                                下一步
                            </Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
            <div v-if="showNext" class="show-next">
                <Form ref="formValidate" :model="formValidate" :label-width="120">
                    <FormItem label="仿真效果分析" prop="desc">
                        <Input v-model="formValidate.remark1" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入内容..."></Input>
                    </FormItem>
                    <FormItem label="定价策略效果分析" prop="desc">
                        <Input v-model="formValidate.remark2" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入内容..."></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="saveNext" :loading="loading1">保存</Button>
                        <Button type="primary" :disabled="button1" @click="next" style="margin-left: 8px">下一步</Button>
                    </FormItem>
                </Form>
            </div>
            <Modal v-model="modal6" width="360" :closable="false" :mask-closable="false">
                <p slot="header" style="color:#f60;text-align:center">
                    <span>温馨提示</span>
                </p>
                <div style="text-align:center">
                    <p>恭喜你完成了所有学习内容，等待老师评分！</p>
                </div>
                <div slot="footer" style="text-align: center">
                    <Button type="primary" :loading="modal_loading" @click="del">返回登录页（{{content}}）</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
import site from '@/mock/data/site'
import video1 from '@/assets/video/1.mp4'
import video2 from '@/assets/video/2.mp4'
import { saveStudentConten } from '@/api/school'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      btnTitle: '继续学习',
      loading: false,
      loading1: false,
      modal6: false,
      modal_loading: false,
      content: 5,
      video1: video1,
      video2: video2,
      systemShow: 1,
      button: true,
      button1: true,
      catList: site,
      select1: 0,
      vertical: '',
      showNext: false,
      disableList: [false, false, false, false, false, false, false],
      formValidate: {
        name: '',
        huopin: '',
        huopinRemark: '',
        cangchu: '',
        cangchuRemark: '',
        zengzhi: '',
        zengzhiRemark: '',
        huilv: '',
        huilvRemark: '',
        pingtai: '',
        pingtaiRemark: '',
        shuju: '',
        shujuRemark: '',
        jingzheng: '',
        jingzhengRemark: '',
        remark1: '',
        remark2: ''
      }
    }
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    run () {
      let _this = this
      let time = setInterval(() => {
        if (_this.content > 0) {
          _this.content = parseInt(_this.content) - 1
        } else {
          clearTimeout(time)
          _this.$router.push({
            name: 'login'
          })
        }
      }, 1000)
    },
    inSystem (id) {
      if (id === 4) {
        if (this.vertical !== 'a') {
          this.$Message.error('选择错误！！')
          return false
        }
      }
      if (id === 3) {
        this.btnTitle = '进入系统'
      }
      this.systemShow = id
    },
    getSumPrice () {
      this.loading = true
      let saveData = [
        { name: '将货品种类作为定价参数', value: this.formValidate.huopinRemark },
        { name: '将仓储物流 作为定价参数', value: this.formValidate.cangchuRemark },
        { name: '将增值服务 作为定价参数', value: this.formValidate.zengzhiRemark },
        { name: '将汇率 作为定价参数', value: this.formValidate.huilvRemark },
        { name: '将平台费用 作为定价参数', value: this.formValidate.pingtaiRemark },
        { name: '将数据收集 作为定价参数', value: this.formValidate.shujuRemark },
        { name: '将竞争对手 作为定价参数', value: this.formValidate.jingzhengRemark }
      ]
      let data = { type: '8', content: JSON.stringify(saveData) }
      saveStudentConten(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.loading = false
          this.button = false
        } else {
          this.$Message.error({
            content: '保存失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    next () {
      this.modal6 = true
      this.run()
    },
    showNextAction () {
      this.showNext = true
    },
    saveNext () {
      this.loading1 = true
      let data = { type: '4', content4: this.formValidate.remark1, content5: this.formValidate.remark2 }
      saveStudentConten(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$Message.success('保存成功')
          this.loading1 = false
          this.button1 = false
        } else {
          this.$Message.error({
            content: '保存失败,\n' + ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.setHelpId(1)
  },
  watch: {
    select1 (data) {
      // this.disableList = this.$common.xeUtils.shuffle(this.disableList)
    }
  }
}
</script>

<style scoped lang="less">
    .cost-page {
        .content {
            width: 800px;

            &-top {
                margin-left: 40%;
            }

            &-form {
                margin-top: 20px;
            }
        }

        .show-next {
            width: 50%;
        }
    }

    .video-page {
        &-row {
            flex-direction: column;
        }
    }
    .video-select{
        margin-top: 100px;
        flex-direction: column;
    }

    .video-top {
        .video {
            height: 400px;
        }
    }
</style>
